<template>
    <div id="dwzyllnl">
        <div class="rfdwList_box table">
            <div class='reportFormHeader'>
                <el-col :span='3'>
                    <div class='search'>
                    </div>
                </el-col>
                <el-col :span='18'>
                    <div class='tableTitle'>单位专业力量年龄、知识结构情况综合统计表</div>
                </el-col>
                <el-col :span="3">
                    <div class="rightSpace flexEnd">
                        <el-button class="btnDefault" @click="exportDwZyll">导出</el-button>
                    </div>
                </el-col>
            </div>
            <el-table
                    class="bbtable"
                    :data='sliceData'
                    border
                    styel='width: 100%;height: 500px'>
                <el-table-column
                        v-for="(item,index) in tableHeader"
                        :key=index
                        :label="item.value"
                        :prop="item.index">
                    <el-table-column
                            v-for="(item,index) in item.chartModel"
                            :key=index
                            :label="item.value"
                            :prop="item.index">
                    </el-table-column>
                </el-table-column>
            </el-table>
            <div class="page">
                <pages :page="page" @changePage="changePage"></pages>
            </div>
        </div>
    </div>
</template>

<script>
  import pages from "../base/pages";
  import { baseServe } from "../../request/api";

  export default {
    name: "dwzyllnl",
    // text:"fuck"
    data(){
      return{
        sliceData: [],
        tableHeader:[],
        tableData:[],
        page: {
          //总条数
          total: 30,
          //每页条数
          limit: 15,
          //当前页数
          currentPage: 1,
          pageSizes: [5, 10,15],
          //实际返回的条数
          dataLength: 7
        },
        year: 2019,
        yearArr: [],
      }
    },
    methods: {
      //导出dwzyll
      exportDwZyll(){
        this.$store.state.loadingFlag=true
        baseServe.exportzyjjmb({  rfdwnm: localStorage.getItem("rfdwnm"),year:2019}).then(()=>{
          window.location.href=(`${JSON.parse(localStorage.getItem('baseJson')).zfBaseUrl}/chart/export/zylljg?rfdwnm=${localStorage.getItem("rfdwnm")}`)
          this.$store.state.loadingFlag=false
        })
      },
      async getTable() {
        this.$store.state.loadingFlag = true;
        this.$store.state.bbyear=''
        let rfdwnm =  parseInt(localStorage.getItem('rfdwnm'));
       await baseServe.dwzyllnlTableHeader({rfdwnm}) .then(res => {
            this.tableHeader = res.data.heads
            this.tableData = res.data.datas
            if(res.data.result.resultCode === '000000'){
                this.$store.state.loadingFlag = false;
            }
        })
        // this.tableData = data.data.tableDatas
        this.page.total = this.tableData.length;
        this.page.currentPage=1
        this.pages();
      },

      getYearArr() {
        this.yearArr = []
        let year = new Date().getFullYear()
        for (let i = 0; i < 10; i++) {
          this.yearArr.push(year - i)
        }
      },

      changePage(data) {
        this.page = data;
        this.pages();
        // this.userList1();
      },
      pages() {
        this.page.total = this.tableData.length;
        if (!this.page.total % this.page.limit) {
          this.page.currentPage = this.page.currentPage - 1;
        }
        let begin = (this.page.currentPage - 1) * this.page.limit;
        let end = this.page.currentPage * this.page.limit;
        this.sliceData = this.tableData.slice(begin, end);
        //  this.page1.total = Math.ceil(this.tableData.length / this.page1.limit);
        // 计算得0时设置为1
        // this.TreeDataList();
      },
    },
    mounted() {
      this.getTable()
      this.pages()
      this.getYearArr()
    },
    watch:{
    year() {
      this.getTable()
    }
  },
    components: {
      pages
    }
  }
</script>

<style scoped lang="less">
    @import "../../assets/css/global.css";
    .bbtable {
        height: 580px;
        overflow-y: auto;
        &::-webkit-scrollbar {
            width: 4px;
        }

        &::-webkit-scrollbar-thumb {
            background: rgba(5, 230, 230, 0.6);
            border-radius: 30px;
        }
    }
</style>
